<div class="outer relative">
	<span class="spinner" />
</div>


<style>
	.outer{width:300px;height:300px;border:1px solid;position:relative;}
	
	/* Qyuki Spinner */
	.spinner {
	  margin: 0 auto;
	  width: 40px;
	  height: 40px;
	  top:50%;
	  left:50%;
	  margin-left:-20px;
	  margin-top:-20px;
	  position: absolute;
	  text-align: center;
	  
	  -webkit-animation: rotate 2.0s infinite linear;
	  animation: rotate 2.0s infinite linear;
	  z-index:1;
	}
	
	.spinner::after, .spinner::before {
	  display:block;content:'';
	  width: 60%;
	  height: 60%;
	  display: inline-block;
	  position: absolute;
	  top: 0;
	  background-color: #66cc00;
	  border-radius: 100%;
	  
	  -webkit-animation: bounce 2.0s infinite ease-in-out;
	  animation: bounce 2.0s infinite ease-in-out;
	}
	
	.spinner::before {
	  top: auto;
	  bottom: 0px;
	  -webkit-animation-delay: -1.0s;
	  animation-delay: -1.0s;
	}
	
	@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
	@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
	
	@-webkit-keyframes bounce {
	  0%, 100% { -webkit-transform: scale(0.0) }
	  50% { -webkit-transform: scale(1.0) }
	}
	
	@keyframes bounce {
	  0%, 100% { 
	    transform: scale(0.0);
	    -webkit-transform: scale(0.0);
	  } 50% { 
	    transform: scale(1.0);
	    -webkit-transform: scale(1.0);
	  }
	}
</style>